<template>
  <div class="dialog-parent" id="menu-left-btn-xe662">
    <!-- <t-drawer header="添加辅助信息" :visible="visible" :on-close="close" :on-confirm="onConfirmAnother"> -->

    <div class="form-content">
      <t-form ref="form" :data="parmas" :rules="rules" @submit="onSubmit">
        <t-form-item name="name" v-if="parmas.name">
          <div class="hw-from-content">
            <div class="from-title-box">
              <!-- <span class="from-title-box-tip">*</span> -->
              <span class="from-title-box-name">标题</span>
            </div>
            <div>{{ parmas.name }}</div>
            <!-- <t-input show-limit-number :maxlength="16" v-model="parmas.name" style="width: 584px"></t-input> -->
          </div>
        </t-form-item>
        <t-form-item v-if="parmas.subTitle">
          <div class="hw-from-content">
            <div class="from-title-box">
              <span class="from-title-box-name">副标题</span>
            </div>
            <div>——{{ parmas.subTitle }}</div>
            <!-- <t-input show-limit-number v-model="parmas.subTitle" :maxlength="30" style="width: 584px"></t-input> -->
          </div>
        </t-form-item>
        <t-form-item label="描述" v-if="parmas.description">
          <div class="hw-from-content">
            <div class="from-title-box">
              <span class="from-title-box-name">描述</span>
            </div>
            <div v-html="parmas.description"></div>
            <!-- <t-textarea
              :maxlength="500"
              placeholder="请输入内容"
              v-model="parmas.description"
              :autosize="{ minRows: 5, maxRows: 10 }"
            /> -->
          </div>
        </t-form-item>
        <t-form-item label="展览封面" v-if="parmas.coverUrl">
          <div class="hw-from-content">
            <div class="from-title-box">
              <span class="from-title-box-name">图片</span>
            </div>
            <div class="img-boxs">
              <div class="img-boxs-icon">
                <div class="img-boxs-icon-item" @click="lookcoverUrl()">
                  <i class="doorIcon">&#xe630;</i>
                </div>
                <!-- <div class="img-boxs-icon-item" @click="delimg(index)">
                  <i class="doorIcon">&#xe634;</i>
                </div> -->
              </div>

              <img
                class="upload-boxs-item t-image t-image--fit-contain t-image--position-center"
                :src="urls + parmas.coverUrl + webUrls"
                alt=""
              />
            </div>
            <!-- <div class="upload-parent">
              <div class="img-boxs" v-if="parmas.coverUrl">
                <div class="img-boxs-icon">
                  <div class="img-boxs-icon-item" @click="lookcoverUrl()">
                    <i class="doorIcon">&#xe630;</i>
                  </div>
                  <div class="img-boxs-icon-item" @click="delimg(index)">
                    <i class="doorIcon">&#xe634;</i>
                  </div>
                </div>

                <img
                  class="upload-boxs-item t-image t-image--fit-contain t-image--position-center"
                  :src="urls + parmas.coverUrl + webUrls"
                  alt=""
                />
              </div>
              <div v-else class="upload-boxs">
                <t-loading :loading="coverShow" size="large">
                  <t-upload
                    ref="uploadRef1"
                    accept=".png,.jpg"
                    :auto-upload="true"
                    :before-upload="beforeUpload"
                    :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                  >
                    <div class="upload-boxs">
                      <i class="doorIcon">&#xe662;</i>
                      <span>点击上传图片</span>
                    </div>
                  </t-upload>
                </t-loading>
              </div>
              <span class="upload-parent-help">支持2M以内JPG、PNG图片</span>
            </div> -->
          </div>
        </t-form-item>
        <t-form-item label="" v-if="parmas.audio && parmas.audio.url">
          <div class="hw-from-content">
            <div class="from-title-box">
              <span class="from-title-box-name">音频</span>
            </div>
            <!-- <div v-if="!parmas.audio.url" class="upload-btn">
              <t-loading :loading="Mp3Show" size="large">
                <t-upload
                  ref="uploadRef2"
                  accept=".mp3"
                  :auto-upload="true"
                  :before-upload="beforeUploadMp3"
                  :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                >
                  <div class="upload-btn">
                    <i class="doorIcon">&#xe652;</i>
                    <span>上传音频</span>
                  </div>
                </t-upload>
              </t-loading>
            </div> -->
            <HWplayer :audio="parmas.audio" @delAudioUrl="delAudioUrl" />
            <!-- <span class="upload-parent-help">支持10M以内MP3格式音频，最多1条</span> -->
          </div>
        </t-form-item>
        <t-form-item label="" v-if="parmas.video && parmas.video.url">
          <div class="hw-from-content">
            <div class="from-title-box">
              <span class="from-title-box-name">视频</span>
            </div>
            <!-- <div class="upload-btn" v-if="!parmas.video.url">
              <t-loading :loading="Mp4Show" size="large">
                <t-upload
                  ref="uploadRef3"
                  accept=".mp4"
                  :auto-upload="true"
                  :before-upload="beforeUploadMp4"
                  :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                >
                  <div class="upload-btn">
                    <i class="iconfonts">&#xe67a;</i>
                    <span>上传视频</span>
                  </div>
                </t-upload>
              </t-loading>
            </div> -->
            <videoPlay :info="parmas.video" @delVideo="delVideo" />
            <!-- <span class="upload-parent-help">支持20M以内MP4格式视频，最多1条</span>/ -->
          </div>
        </t-form-item>
      </t-form>
    </div>

    <div class="footer-box">
      <t-button @click="close" variant="outline">取消</t-button>
      <!-- <t-button @click="onConfirmAnother" :loading="loading">保存辅助信息</t-button> -->
    </div>

    <!-- </t-drawer> -->
  </div>
  <t-image-viewer v-model:visible="IMGvisible" :images="[urls + parmas.coverUrl]"> </t-image-viewer>
</template>

<script setup lang="ts">
// @ts-nocheck
import videoPlay from '@/components/video/playVideo.vue';
import HWplayer from '@/components/audio/audio.vue';
import { disableSort, moduleDelete, moduleSave, moduleList, moduleInfo } from '@/api/desgin/desgin';
import { url, heards, urls, upLoadFn } from '@/utils/request/upload';
import { ref, reactive } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { number } from 'echarts/core';

const webUrls: string = '?imageView2/3/w/180/h/180/format/webp';
const IMGvisible = ref(false);
const uploadAllFilesInOneRequest = ref(false);
const form = ref(null);
const coverShow = ref(false); //上传loading
const Mp3Show = ref(false); //上传loading
const Mp4Show = ref(false); //上传loading
const loading = ref(false);
const props = defineProps({
  parentId: {
    type: Number,
  },
  visible: {
    type: Boolean,
  },
  info: {
    type: Object,
  },
  id: {
    type: Number,
  },
});
const emit = defineEmits(['close', 'submit']);
const rules = {
  name: [{ required: true, message: '标题必填', type: 'error' }],
};
const parmas = reactive({
  id: 0,
  name: '',
  subTitle: '',
  description: '',
  coverUrl: '',
  parentId: 0,
  data: [],
  audio: {
    type: 3,
    url: '',
    description: '',
    name: '',
  },
  video: {
    type: 4,
    url: '',
    description: '',
    name: '',
  },
  isAuxiliary: true,
});

parmas.parentId = props.parentId;
const init = async () => {
  let res = await moduleInfo(props.id);
  parmas.id = res.data.id;
  parmas.name = res.data.name;
  parmas.subTitle = res.data.subTitle;
  parmas.description = res.data.description;
  parmas.coverUrl = res.data.coverUrl;
  parmas.parentId = res.data.parentId;
  if (res.data.audio) {
    parmas.audio = res.data.audio;
  }
  if (res.data.video) {
    parmas.video = res.data.video;
  }
};
if (props.id) {
  init();
}
const lookcoverUrl = () => {
  IMGvisible.value = true;
};
const delimg = () => {
  parmas.coverUrl = '';
};
const onSubmit = ({ validateResult, firstError, e }) => {
  e.preventDefault();
  if (validateResult === true) {
    if (loading.value) {
      return;
    }
    //  emit('submit',parmas);
    moduleSave(localStorage.getItem('projectId'), parmas).then((res) => {
      if (res.statusCode == 200) {
        MessagePlugin.success('创建成功');
        emit('submit', parmas);
      }
    });
    // emit('submit');
  } else {
    // console.log('Validate Errors: ', firstError, validateResult);
    // MessagePlugin.warning(firstError);
  }
};

const onConfirmAnother = (context) => {
  //点击确认按钮
  //
  form.value.submit();
};

const close = (context) => {
  //取消按钮
  emit('close');
};
const beforeUpload = (file: any) => {
  //回调钩子
  if (
    file.type !== 'image/png' &&
    file.type !== 'image/jpg' &&
    file.type !== 'image/jpeg' &&
    file.type !== 'image/jpeg'
  ) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (file.size / 1048576 > 2) {
    MessagePlugin.error('上传大小超出2M限制');
    return;
  }
  coverShow.value = true;
  upLoadFn(file, 5).then((res) => {
    // console.log(res);
    if (res) {
      parmas.coverUrl = res;
    } else {
      MessagePlugin.error('创建成功');
    }
    coverShow.value = false;
  });
};
const beforeUploadMp3 = (file: any) => {
  //回调钩子
  if (file.type.indexOf('audio/') == -1) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (file.size / 1048576 > 10) {
    MessagePlugin.error('上传大小超出10M限制');
    return;
  }
  Mp3Show.value = true;
  upLoadFn(file, 5).then((res) => {
    // console.log(res);
    if (res) {
      parmas.audio.url = res;
      parmas.audio.name = file.raw.name;
    } else {
      MessagePlugin.error('上传成功');
    }
    // console.log(parmas.audio);
    Mp3Show.value = false;
  });
};
const delAudioUrl = () => {
  //删除音频
  parmas.audio.url = '';
  parmas.audio.name = '';
};
const delVideo = () => {
  //删除音频
  parmas.video.url = '';
  parmas.video.name = '';
};

const beforeUploadMp4 = (file: any) => {
  //回调钩子

  if (file.type !== 'video/mp4') {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (file.size / 1048576 > 20) {
    MessagePlugin.error('上传大小超出20M限制');
    return;
  }

  Mp4Show.value = true;
  upLoadFn(file, 5).then((res) => {
    // console.log(res);
    if (res) {
      parmas.video.url = res;
      parmas.video.name = file.raw.name;
    } else {
      MessagePlugin.error('创建成功');
    }
    Mp4Show.value = false;
  });
};
</script>
<style lang="less" scoped>
.img-box {
  width: 100%;

  height: 191px;
  // box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
  border-radius: 4px;

  background: #f0f0f0;
  border-radius: 4px 4px 0px 0px;
}
.btm-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  // height: 104px;
  width: 100%;
  background: #ffffff;
  // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
  border-radius: 0px 0px 4px 4px;
}

.btm-text {
  display: flex;
  width: 100%;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 24px;
  margin-top: 8px;
  text-align: left;
  // text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
}

:deep(.t-dialog__footer) {
  // padding-top: 0px;
  box-shadow: none;
  // height: 36px;
}
.footer-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 80px;
  margin-top: 26px;
  background: #fff;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) inset;
  padding-right: 30px;
  :deep(.t-button) {
    margin-left: 12px;
  }
  :deep(.t-button--variant-base.t-button--theme-primary:not(.t-is-disabled):not(.t-button--ghost)) {
    width: 184px;
  }
  // box-shadow: inset 0px 1px 0px 0px rgba(230, 230, 230, 0.5);
}
.t-row {
  margin: 0;
}
.mg-top-style {
  // margin-top: 16px;
}
:deep(.t-button--variant-base.t-button--theme-primary:not(.t-is-disabled):not(.t-button--ghost)) {
  height: 36px;
}
:deep(.t-button:not(.t-is-disabled):not(.t-button--ghost)) {
  height: 36px;
}

.hw-flex-style-c-c-c {
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
}
.btm-box-active {
  border-radius: 4px;
  border: 1px solid #e62b17;
}
:deep(.t-dialog) {
  width: 960px;
}
:deep(.t-dialog__header) {
  box-shadow: none;
  height: 60px;
}
:deep(.t-dialog__header-content) {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 28px;
}
:deep(.t-dialog__footer) {
  //   height: 88px;
}
:deep(.t-dialog__body) {
  padding: 0px 40px;
  height: 60vh;
}
.upload-parent {
  display: flex;
  flex-direction: column;
}
.upload-parent-help {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
  margin-top: 4px;
}
:deep(.t-button--variant-base.t-button--theme-primary:not(.t-is-disabled):not(.t-button--ghost)) {
  width: 96px;
}
.upload-boxs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 184px;
  height: 184px;
  background: #fcfbfa;
  border-radius: 4px;
  cursor: pointer;
  border: 1px dashed #ebe4e3;

  .doorIcon {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.38);
    margin-bottom: 12px;
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.38);
    line-height: 24px;
  }
}
.upload-boxs:hover {
  border: 1px dashed #f2573f;
}
.upload-parent {
  display: flex;
  //   align-items: flex-end;
  .tips {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.38);
    line-height: 22px;
    margin-left: 10px;
  }
}
.img-boxs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 184px;
  height: 184px;
  border-radius: 4px;
  overflow: hidden;

  border: 1px dashed #ebe4e3;
  .upload-boxs-item {
    width: 184px;
    height: 184px;
    border-radius: 4px;
  }
}
.img-boxs-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  z-index: 60;
}
.img-boxs-icon-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 4px 5px 0px rgba(0, 0, 0, 0.08),
    0px 2px 4px -1px rgba(0, 0, 0, 0.12);
  border-radius: 12px;

  border-radius: 50%;
  .doorIcon {
    font-size: 16px;

    color: #fff;
  }
}
.t-image {
  background: #fafafa;
}
.upload-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  //   padding: 0 18px;
  width: 124px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #e62b17;
  .iconfonts {
    font-size: 16px;
    color: #e62b17;
  }
  .doorIcon {
    font-size: 16px;
    color: #e62b17;
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e62b17;
    line-height: 24px;
    margin-left: 8px;
  }
}
.upload-btn:hover {
  background: #ffece6;
}
.dialog-parent {
  height: 100%;
  display: flex;
  flex-direction: column;

  .form-content {
    flex: 1;
  }
  .footer-box {
    flex-shrink: 0;
  }
}
#menu-left-btn-xe662 {
  :deep(.t-popup__content) {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);

    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent !important;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #333;
    // border-color: #333;
  }
  :deep(.t-popup__arrow::before) {
    background-color: #333;
  }
}
:deep(.t-textarea__inner::placeholder) {
  font-size: 16px;
}
.header-text {
  color: rgba(0, 0, 0, 0.8);
  font-family: 'PingFang SC';
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
  padding: 20px 0;
  background: #fff;
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.05) inset;
  margin-bottom: 24px;
}
:deep(.t-textarea__limit) {
  position: absolute;
  right: 12px;
  bottom: 11px !important;
}
:deep(.t-textarea__inner) {
  width: 660px !important;
  height: 128px !important;
}
:deep(.t-input__wrap) {
  height: 36px !important;
}
:deep(.narrow-scrollbar) {
  scrollbar-width: none !important;
  &::-webkit-scrollbar {
    display: none !important;
  }
}
.form-content {
  padding: 24px 30px !important;
  scrollbar-width: none !important;
  :deep(.t-form__item) {
    margin-bottom: 24px;
  }
  :deep(.t-form-item__name) {
    margin-bottom: 24px;
  }
  :deep(.t-form__controls-content) {
    min-height: 100%;
  }
  :deep(.t-form__controls) {
    min-height: 100%;
  }
}
.form-content {
  width: 100%;
  flex: 1;
  overflow: auto;
  padding: 24px 30px !important;
  scrollbar-width: none !important;
}
.hw-from-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: start;
  .from-title-box {
    width: 48px;
    margin-right: 32px;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  :deep(.video-bottom .doorIcon) {
    display: none !important;
  }
  :deep(.right-top-menu .leftIcon) {
    display: none !important;
  }
}
:deep(.video-boxs-img video) {
  border-radius: 6px;
}
</style>
